useForm

useForm, para gestionar formularios con validaciones de campos. Utiliza estado para almacenar los valores del formulario y las validaciones de entrada, y proporciona una función para manejar cambios en los campos del formulario. La validación incluye la igualdad de contraseñas, la validez del correo electrónico y si el número de teléfono consiste solo en dígitos. El hook devuelve un array con el estado del formulario, la función de manejo de cambios y el estado de validación.

import { useState } from "react";

export const useForm = (initialState = {}) => {
	let isEmailRegex =
		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	const isPhoneRegex = /^[0-9]+$/;
	
	const [formState, setFormState] = useState(initialState);
	const [validationInput, setValidationInput] = useState({
		equalPassword: true,
		isPhone: true,
		isEmail: true,
	});


	const handleInputChange = ({ target }) => {

		if (target.name === "secondPassword") {
			setValidationInput({
				...validationInput,
				equalPassword: target.value === formState.password,
			});
		}

		//* checkbox
		if (target.type === "checkbox") {
			setFormState({
				...formState,
				[target.name]: !formState[target.name],
			});
		} else {
			//* validate email
			if (target.name === "email") {
				const respose = isEmailRegex.test(target.value);
				setValidationInput({
					...validationInput,
					isEmail: respose,
				});
			}
			if (target.name === "phone") {
				const response = isPhoneRegex.test(target.value);
				setValidationInput({
					...validationInput,
					isPhone: response,
				});
			}
			setFormState({
				...formState,
				[target.name]: target.value,
			});
		}
	};

	return [formState, handleInputChange, validationInput];
};

Este hook se utiliza de la siguiente manera:

export const TemplateRegister = () => {
  const [formValues, handleInputChange, validationInput] = useForm({
    email: "",
    phone: "",
    nickname: "",
  });

  const { email, phone, nickname } = formValues;
  const { isEmail, isPhone } = validationInput;

  const SendForm = (e) => {
    e.preventDefault();
    if (!isEmail) {
      generateToast("No es Email");
      return;
    }
    if (!isPhone) {
      generateToast("No es un telefono");
      return;
    }
    if (nickname === "") {
      generateToast("Nombre obligatorio.");
      return;
    }
  };

  return (
    <div className="h-full">
      <form
        onSubmit={(e) => {
          SendForm(e);
        }}
        className="flex flex-col gap-6 p-4"
      >
        <div className="flex flex-col gap-2">
          <label className="text-white" htmlFor="emailRegister">
            Correo
          </label>
          <input
            className="text-white p-3 rounded-lg bg-blacktransparent"
            id="emailRegister"
            name="email"
            type="text"
            placeholder="someone@example.com"
            onChange={handleInputChange}
            value={email}
          />
        </div>
        <div className="flex flex-col gap-2">
          <label className="text-white" htmlFor="phoneRegister">
            Teléfono
          </label>
          <input
            className="text-white p-3 rounded-lg bg-blacktransparent"
            id="phoneRegister"
            name="phone"
            type="text"
            placeholder="0000000000"
            onChange={handleInputChange}
            value={phone}
          />
        </div>
        <div className="flex flex-col gap-2">
          <label className="text-white" htmlFor="userRegister">
            Nombre Completo
          </label>
          <input
            className="text-white p-3 rounded-lg bg-blacktransparent"
            id="userRegister"
            name="nickname"
            type="text"
            placeholder="Nombre"
            onChange={handleInputChange}
            value={nickname}
          />
        </div>
        <button
          type="submit"
          value="Submit"
          className="self-start w-full h-14 overflow-hidden rounded-xl mt-2"
        >
            <span className="text-white font-bold">Enviar</span>
        </button>
      </form>
    </div>
  );
};